<template>
    <div class="intoBounding">
        <Change_header/>
        <div class="topic_block">
            <div class="user_info">
                <img src="../../images/mainTwo/Banner/08.png" />
                <div class="user_item_info">
                    <router-link to="bloggerInfo">
                        <p class="user_name">Another</p>
                    </router-link>
                    <p class="fans_count">217粉丝</p>
                </div>
                <span class="foucs">关注ta</span>
            </div>
            <div class="img_block">
                <img src="../../images/mainOne/index/IMG_shouye_01.png" />
            </div>
        </div>
        <div class="content_container">
            <div class="content">
                <div class="banner_time_info">
                    <span class="banner_time">
                        <img src="../../images/mainTwo/Banner/04.png" /> &nbsp;九天前
                    </span>
                    <span class="banner_time banner_watch">
                        <img src="../../images/mainTwo/Banner/05.png" /> &nbsp;3120
                    </span>
                    <span class="banner_time banner_time_float">
                        <img src="../../images/mainTwo/Banner/06.png" /> &nbsp;30
                    </span>
                    <span class="banner_time banner_time_float">
                        <img src="../../images/mainTwo/Banner/07.png" /> &nbsp;500
                    </span>
                </div>
                <div class="content_item clearfix">
                    <div class="head_icon">
                        <img src="../../images/mainTwo/Banner/08.png" />
                    </div>
                    <div class="content_text">
                        <p class="content_user_name">蕊儿</p>
                        <p class="content_detail">很赞</p>
                    </div>
                    <div class="content_time">
                        22分钟前
                    </div>
                </div>
                <div class="content_item clearfix">
                    <div class="head_icon">
                        <img src="../../images/mainTwo/Banner/09.png" />
                    </div>
                    <div class="content_text">
                        <p class="content_user_name">悦小舞</p>
                        <p class="content_detail">喜欢这个产品</p>
                    </div>
                    <div class="content_time">
                        22分钟前
                    </div>
                </div>
                <div class="content_item clearfix">
                    <div class="head_icon">
                        <img src="../../images/mainTwo/Banner/10.png" />
                    </div>
                    <div class="content_text">
                        <p class="content_user_name">蕊儿</p>
                        <p class="content_detail">大爱啊</p>
                    </div>
                    <div class="content_time">
                        22分钟前
                    </div>
                </div>
            </div>
        </div>
        <Footers/>
    </div>
</template>
<script>
import Change_header from "../../components/headershort"
import Footers from "../../components/footer"
export default {
    name: "allCommot",
    components: { Change_header, Footers }
}
</script>
<style lang="less" scoped>
@pub_main_bgcolor :#ff406f;
    .topic_block {
        width: 710/75rem;
        height: 495/75rem;
        border: 1px solid #ccc;
        box-shadow: 0 0 15px #ccc;
        margin: 0 auto;
        border-radius: 15px;
        position: relative;
        margin-top: 100/75rem;
        background: #fff;
        .user_info {
            line-height: 60px;
            margin-bottom: 50/75rem;
            img {
                width: 140/75rem;
                height: 140/75rem;
                position: absolute;
                top: -40/75rem;
                left: 20/75rem;
            }
            .user_item_info {
                float: left;
                text-align: right;
                margin-left: 80/75rem;
                .fans_count {
                    font-size: 28/75rem;
                }
            }
            .user_name {
                font-size: 30/75rem;
                margin-left: 130/75rem;
            }
            .foucs {
                font-size: 24/75rem;
                display: block;
                float: right;
                border: 1px solid #333;
                border-radius: 40/75rem;
                line-height: 40/75rem;
                width: 130/75rem;
                text-align: center;
                margin-top: 30/75rem;
                margin-right: 30/75rem
            }
        }
        .img_block {
            width: 670/75rem;
            height: 320/75rem;
            margin: 0 auto;
            img {
                width: 670/75rem;
                height: 320/75rem;
            }
        }
    }
    .content_container {
        padding: 20/75rem;
        width: auto;
        margin-top: -40/75rem;
        .content {
            border-bottom: 1px solid #d1d1d1;
            .banner_time_info {
                .banner_time {
                    display: inline-block;
                    font-size: 24/75rem;
                    line-height: 40/75rem;
                    img {
                        display: inline-block;
                        width: 32/75rem;
                        height: 32/75rem; 
                        vertical-align: middle;
                    }
                }
                .banner_watch{
                    img{
                        width: 45/75rem;
                        height: 25/75rem; 
                    }
                }
                .banner_time_float{
                    float: right;
                    margin: 45/75rem 10/75rem 0 10/75rem;
                    
                }
            }
            .content_item{
                margin: 20/75rem 0;
                .head_icon{
                    float: left;
                    img{
                        width: 80/75rem;
                        height: 80/75rem;
                    }
                }
                .content_text{
                    .content_user_name{
                        font-size: 28/75rem;
                    }
                    float: left;
                    font-size: 22/75rem;
                    margin-left: 55/75rem;
                    p:last-child{
                        margin-top: 20/75rem;
                    }
                }
                .content_time{
                    float: right;
                    font-size: 22/75rem;
                }
            }
        }
        .all_content{
                text-align: center;
                font-size: 28/75rem;
                color: #ff406f;
        }
        .input{
            // padding: 20/75rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            margin-left: -20/75rem;
            height: 80/75rem;
            box-shadow: 5px 0 15px #aaa;
            input{
                position:fixed;
                bottom: 10/75rem;
                left: 20/75rem;
                width: 70%;
                height: 50/75rem;
                border: 1px solid #aaa;
                border-radius: 15/75rem;
                text-indent: 15/75rem;
                font-size: 26/75rem;
            }
        }
    }
</style>
